import config from '../config'
import CanvasAbstract from './CanvasAbstract'
import PlayModel from '../model/play'
import position from '../service/position'
class Play extends CanvasAbstract implements ICanvas {
  num(): number {
    return 0
  }
  model(): ModelConstruct {
    return PlayModel
  }
  rander(): void {
    this.createModels()
    super.renderModel()
    setInterval(() => this.renderModel(), config.timeout)
  }

  renderModel() {
    this.ctx.clearRect(0, 0, config.canvas.width, config.canvas.height)
    super.renderModel()
    // this.models.forEach(model => {
    //   model.render()
    //   this.canvas.drawImage(model.image(), model.x, model.y, config.model.width, config.model.height)
    // })
  }
  protected createModels(): void {
    const cw = config.canvas.width
    const ch = config.canvas.height
    const mw = config.model.width
    const mh = config.model.height
    ;[{ x: cw / 2 + mw * 4, y: ch - mh }].forEach(position => {
      const model = this.model() as ModelConstruct
      const instance = new model(position.x, position.y)
      this.models.push(instance)
    })
  }
}

export default new Play('play')
